<html><head>
<meta charset="utf-8">
<title>按钮 - 页面元素 - Layui</title>
<meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <meta name="apple-mobile-web-app-status-bar-style" content="black"> 
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="format-detection" content="telephone=no">
  
  <link rel="stylesheet" href="__TPLPATH__/Public/layui/admin/layui.css"  media="all">
  <link rel="stylesheet" href="__TPLPATH__/Public/layui/admin/global.css"  media="all">
  
<link id="layuicss-skinlayercss" rel="stylesheet" href="__TPLPATH__/Public/layui/admin/layer.css" media="all"><link id="layuicss-skincodecss" rel="stylesheet" href="__TPLPATH__/Public/layui/admin/code.css" media="all"></head>
<body>
<div class="layui-header header header-doc">
  <div class="layui-main">
    <a class="logo" href="/">
      <img src="//res.layui.com/images/layui/logo.png" alt="layui">
    </a>
    <ul class="layui-nav">
      <li class="layui-nav-item layui-this">
        <a href="/doc/">文档</a>
      </li>
      <li class="layui-nav-item ">
        <a href="/demo/">演示</a>
      </li>
      
      <li class="layui-nav-item">
        <a href="http://fly.layui.com/" target="_blank">社区</a>
      </li>
      <li class="layui-nav-item site-nav-layim">
        <a href="http://layim.layui.com/" target="_blank">LayIM</a>
      </li>
    <span class="layui-nav-bar"></span></ul>
  </div>
</div>
<div class="layui-layer layui-layer-page layui-layer-dir layer-anim" id="layui-layer1" type="page" times="1" showtime="0" contype="object" style="z-index: 19891015; margin-left: -15px; top: 92px; left: 1226px; "><div class="layui-layer-title" style="cursor: move; ">目录</div><div id="" class="layui-layer-content"><ul class="site-dir layui-layer-wrap" style="display: block; ">
  <li><a href="#use"><cite>用法</cite></a></li>
  <li><a href="#theme"><cite>按钮主题</cite></a></li>
  <li><a href="#size"><cite>按钮尺寸</cite></a></li>
  <li><a href="#radius"><cite>圆角按钮</cite></a></li>
  <li><a href="#icon"><cite>图标按钮</cite></a></li>
</ul></div><span class="layui-layer-setwin"><a class="layui-layer-ico layui-layer-close layui-layer-close1" href="javascript:;"></a></span><span class="layui-layer-resize"></span></div>
<div class="layui-main site-inline">
  <div class="site-tree">
  <ul class="layui-tree">
  
    <li><h2>基础说明</h2></li>
  
    <li class="site-tree-noicon ">
      <a href="/doc/"><cite>开始使用</cite></a>
    </li>
    <li class="site-tree-noicon ">
      <a href="/doc/base/infrastructure.html">
        <cite>底层支撑</cite>
      </a>
    </li>
    <li class="site-tree-noicon ">
      <a href="/doc/base/element.html">
        <cite>页面元素</cite>
        <em>规范 / 公共类、属性</em>
      </a>
    </li>
    <li class="site-tree-noicon ">
      <a href="/doc/base/modules.html">
        <cite>组件规范</cite>
        <em>使用 / 模块扩展</em>
      </a>
    </li>
    <li class="site-tree-noicon ">
      <a href="/doc/base/faq.html">
        <cite>常见问题</cite>
      </a>
    </li>
    
    <li><h2>页面元素</h2></li>
    
    
    
    <li class="site-tree-noicon ">
      <a href="/doc/element/color.html">
        <cite>颜色</cite>
        <em>内置的色值参考</em>
      </a>
    </li>
    
    <li class="site-tree-noicon ">
      <a href="/doc/element/icon.html">
        <cite>图标</cite>
        <em>字体图标</em>
      </a>
    </li>
    <li class="site-tree-noicon ">
      <a href="/doc/element/auxiliar.html">
        <cite>辅助</cite>
        <em>引用 / 分块 / 横线…</em>
      </a>
    </li>
    <li class="site-tree-noicon layui-this">
      <a href="/doc/element/button.html">
        <cite>按钮</cite>
        <em>button组</em>
      </a>
    </li>
    <li class="site-tree-noicon ">
      <a href="/doc/element/form.html">
        <cite>表单</cite>
        <em>form元素集合</em>
      </a>
    </li>
    <li class="site-tree-noicon ">
      <a href="/doc/element/nav.html">
        <cite>导航</cite>
        <em>菜单 / Tab / 面包屑 …</em>
      </a>
    </li>
    
   
    
    <li><h2>内置组件</h2></li>
    
    <li>
      <a href="/doc/modules/layer.html">
        <i class="layui-icon" style="top: 3px;"></i><cite>弹出层</cite>
        <em>layer</em>
      </a>
    </li>
    <li>
      <a href="/doc/modules/layim.html">
        <i class="layui-icon" style="position: relative; top: 3px;"></i>
        <cite>即时通讯</cite>
        <em>layim</em>
      </a>
    </li>
    <li>
      <a href="/doc/modules/laydate.html">
        <i class="layui-icon" style="top: 1px;"></i><cite>日期时间选择</cite>
        <em>laydate</em>
      </a>
    </li>
    <li>
      <a href="/doc/modules/laypage.html">
        <i class="layui-icon"></i><cite>分页</cite>
        <em>laypage</em>
      </a>
    </li>
    <li>
      <a href="/doc/modules/laytpl.html">
        <i class="layui-icon"></i><cite>模板引擎</cite>
        <em>laytpl</em>
      </a>
    </li>
    <li>
      <a href="/doc/modules/layedit.html">
        <i class="layui-icon"></i>
        <cite>富文本编辑器</cite>
        <em>layedit</em>
      </a>
    </li>
    <li>
      <a href="/doc/modules/form.html">
        <i class="layui-icon" style="top: 2px;"></i>
        <cite>表单</cite>
        <em>form</em>
      </a>
    </li>
    <li>
      <a href="/doc/modules/upload.html">
        <i class="layui-icon"></i>
        <cite>文件上传</cite>
        <em>upload</em>
      </a>
    </li>
    <li>
      <a href="/doc/modules/element.html">
        <i class="layui-icon" style="top: 1px; font-size: 18px;"></i>
        <cite>常用元素操作</cite>
        <em>element</em>
      </a>
    </li>
    <li>
      <a href="/doc/modules/tree.html">
        <i class="layui-icon"></i>
        <cite>树形菜单</cite>
        <em>tree</em>
      </a>
    </li>
    
    <li>
      <a href="/doc/modules/util.html">
        <i class="layui-icon"></i>
        <cite>工具块</cite>
        <em>util</em>
      </a>
    </li>
    <li>
      <a href="/doc/modules/flow.html">
        <i class="layui-icon"></i>
        <cite>流加载</cite>
        <em>flow</em>
      </a>
    </li>
    <li>
      <a href="/doc/modules/code.html">
        <i class="layui-icon" style="top: 1px;"></i>
        <cite>代码修饰器</cite>
        <em>code</em>
      </a>
    </li>
  </ul>
</div>

  <div class="site-content">
    <h1 class="site-h1">按钮 - 页面元素</h1>
    <div class="site-tips site-text">
      <p>向任意HTML元素设定<em>class="layui-btn"</em>，建立一个基础按钮。通过追加格式为<em>layui-btn-{type}</em>的class来定义其它按钮风格。内置的按钮class可以进行任意组合，从而形成更多种按钮风格。</p>
    </div>
    
    
<div style="margin: 15px 0; text-align: center; background-color: #F2F2F2;">
  <ins class="adsbygoogle" style="display:inline-block;width:728px;height:90px" data-ad-client="ca-pub-6111334333458862" data-ad-slot="9841027833" data-adsbygoogle-status="done"><ins id="aswift_0_expand" style="display:inline-table;border:none;height:90px;margin:0;padding:0;position:relative;visibility:visible;width:728px;background-color:transparent"><ins id="aswift_0_anchor" style="display:block;border:none;height:90px;margin:0;padding:0;position:relative;visibility:visible;width:728px;background-color:transparent"><iframe width="728" height="90" frameborder="0" marginwidth="0" marginheight="0" vspace="0" hspace="0" allowtransparency="true" scrolling="no" allowfullscreen="true" onload="var i=this.id,s=window.google_iframe_oncopy,H=s&amp;&amp;s.handlers,h=H&amp;&amp;H[i],w=this.contentWindow,d;try{d=w.document}catch(e){}if(h&amp;&amp;d&amp;&amp;(!d.body||!d.body.firstChild)){if(h.call){setTimeout(h,0)}else if(h.match){try{h=s.upd(h,i)}catch(e){}w.location.replace(h)}}" id="aswift_0" name="aswift_0" style="left:0;position:absolute;top:0;"></iframe></ins></ins></ins>
</div>

    
    <div class="site-title">
      <fieldset><legend><a name="use">用法</a></legend></fieldset>
    </div>
    <div class="site-text">
      <pre class="layui-code layui-box layui-code-view"><h3 class="layui-code-h3">code<a href="http://www.layui.com/doc/modules/code.html" target="_blank">layui.code</a></h3><ol class="layui-code-ol"><li>&lt;button class="layui-btn"&gt;一个标准的按钮&lt;/button&gt;</li><li>&lt;a href="http://www.layui.com" class="layui-btn"&gt;一个可跳转的按钮&lt;/a&gt;</li><li>      </li></ol></pre>
      <p></p>
    </div>
    
    <div class="site-title">
      <fieldset><legend><a name="theme">主题</a></legend></fieldset>
    </div>
    <div class="site-text">
      <p>
        <button class="layui-btn layui-btn-primary">原始按钮</button>
        <button class="layui-btn">默认按钮</button>
        <button class="layui-btn layui-btn-normal">百搭按钮</button>
        <button class="layui-btn layui-btn-warm">暖色按钮</button>
        <button class="layui-btn layui-btn-danger">警告按钮</button>
        <button class="layui-btn layui-btn-disabled">禁用按钮</button>
      </p>
      <table class="site-table">
        <thead>
          <tr>
            <th>名称</th>
            <th>组合</th>
          </tr> 
        </thead>
        <tbody>
          <tr>
            <td style="text-align: center;">原始</td>
            <td>class="layui-btn layui-btn-primary"</td>
          </tr>
          <tr>
            <td style="text-align: center;">默认</td>
            <td>class="layui-btn"</td>
          </tr>
          <tr>
            <td style="text-align: center;">百搭</td>
            <td>class="layui-btn layui-btn-normal"</td>
          </tr>
          <tr>
            <td style="text-align: center;">暖色</td>
            <td>class="layui-btn layui-btn-warm"</td>
          </tr>
          <tr>
            <td style="text-align: center;">警告</td>
            <td>class="layui-btn layui-btn-danger"</td>
          </tr>
          <tr>
            <td style="text-align: center;">禁用</td>
            <td>class="layui-btn layui-btn-disabled"</td>
          </tr>
        </tbody>
      </table>
    </div>
    
    <div class="site-title">
      <fieldset><legend><a name="size">尺寸</a></legend></fieldset>
    </div>
    <div class="site-text">
      <p>
        <button class="layui-btn layui-btn-big">大型按钮</button>
        <button class="layui-btn">默认按钮</button>
        <button class="layui-btn layui-btn-small">小型按钮</button>
        <button class="layui-btn layui-btn-mini">迷你按钮</button>
      </p>
      <table class="site-table">
        <thead>
          <tr>
            <th>尺寸</th>
            <th>组合</th>
          </tr> 
        </thead>
        <tbody>
          <tr>
            <td style="text-align: center;">大型</td>
            <td>class="layui-btn layui-btn-big"</td>
          </tr>
          <tr>
            <td style="text-align: center;">默认</td>
            <td>class="layui-btn"</td>
          </tr>
          <tr>
            <td style="text-align: center;">小型</td>
            <td>class="layui-btn layui-btn-small"</td>
          </tr>
          <tr>
            <td style="text-align: center;">迷你</td>
            <td>class="layui-btn layui-btn-mini"</td>
          </tr>
        </tbody>
      </table>
      <p>
        <button class="layui-btn layui-btn-big layui-btn-normal">大型百搭</button>
        <button class="layui-btn layui-btn-warm">正常暖色</button>
        <button class="layui-btn layui-btn-small layui-btn-danger">小型警告</button>
        <button class="layui-btn layui-btn-mini layui-btn-disabled">禁用</button>
      </p>
      <table class="site-table">
        <thead>
          <tr>
            <th>尺寸</th>
            <th>组合</th>
          </tr> 
        </thead>
        <tbody>
          <tr>
            <td style="text-align: center;">大型百搭</td>
            <td>class="layui-btn layui-btn-big layui-btn-normal"</td>
          </tr>
          <tr>
            <td style="text-align: center;">正常暖色</td>
            <td>class="layui-btn layui-btn-warm"</td>
          </tr>
          <tr>
            <td style="text-align: center;">小型警告</td>
            <td>class="layui-btn layui-btn-small layui-btn-danger"</td>
          </tr>
          <tr>
            <td style="text-align: center;">迷你禁用</td>
            <td>class="layui-btn layui-btn-mini layui-btn-disabled"</td>
          </tr>
        </tbody>
      </table>
    </div>
  
    <div class="site-title">
      <fieldset><legend><a name="radius">圆角</a></legend></fieldset>
    </div>
    <div class="site-text">
      <p>
        <button class="layui-btn layui-btn-radius layui-btn-primary">原始按钮</button>
        <button class="layui-btn layui-btn-radius">默认按钮</button>
        <button class="layui-btn layui-btn-radius layui-btn-normal">百搭按钮</button>
        <button class="layui-btn layui-btn-radius layui-btn-warm">暖色按钮</button>
        <button class="layui-btn layui-btn-radius layui-btn-danger">警告按钮</button>
        <button class="layui-btn layui-btn-radius layui-btn-disabled">禁用按钮</button>
      </p>
      <table class="site-table">
        <thead>
          <tr>
            <th>主题</th>
            <th>组合</th>
          </tr> 
        </thead>
        <tbody>
          <tr>
            <td style="text-align: center;">原始</td>
            <td>class="layui-btn layui-btn-radius layui-btn-primary"</td>
          </tr>
          <tr>
            <td style="text-align: center;">默认</td>
            <td>class="layui-btn layui-btn-radius"</td>
          </tr>
          <tr>
            <td style="text-align: center;">百搭</td>
            <td>class="layui-btn layui-btn-radius layui-btn-normal"</td>
          </tr>
          <tr>
            <td style="text-align: center;">暖色</td>
            <td>class="layui-btn layui-btn-radius layui-btn-warm"</td>
          </tr>
          <tr>
            <td style="text-align: center;">警告</td>
            <td>class="layui-btn layui-btn-radius layui-btn-danger"</td>
          </tr>
          <tr>
            <td style="text-align: center;">禁用</td>
            <td>class="layui-btn layui-btn-radius layui-btn-disabled"</td>
          </tr>
        </tbody>
      </table>
      <p>
        <button class="layui-btn layui-btn-big layui-btn-radius layui-btn-normal">大型百搭</button>
        <button class="layui-btn layui-btn-small layui-btn-radius layui-btn-danger">小型警告</button>
        <button class="layui-btn layui-btn-mini layui-btn-radius layui-btn-disabled">迷你禁用</button>
      </p>
      <table class="site-table">
        <thead>
          <tr>
            <th>尺寸</th>
            <th>组合</th>
          </tr> 
        </thead>
        <tbody>
          <tr>
            <td style="text-align: center;">大型百搭</td>
            <td>class="layui-btn layui-btn-big layui-btn-radius layui-btn-normal"</td>
          </tr>
          <tr>
            <td style="text-align: center;">小型警告</td>
            <td>class="layui-btn layui-btn-small layui-btn-radius layui-btn-danger"</td>
          </tr>
          <tr>
            <td style="text-align: center;">迷你禁用</td>
            <td>class="layui-btn layui-btn-mini layui-btn-radius layui-btn-disabled"</td>
          </tr>
        </tbody>
      </table>
      <p class="layui-word-aux">
        哈哈哈哈哈，这组合名长得简直没朋友~ 
        <img src="http://res.layui.com/layui/build/images/face/2.gif">
        <img src="http://res.layui.com/layui/build/images/face/38.gif">
      </p>
    </div>
      
    <div class="site-title">
      <fieldset><legend><a name="icon">图标</a></legend></fieldset>
    </div>
    <div class="site-text">
      <p>
        <button class="layui-btn"><i class="layui-icon"></i> 添加</button>
        <button class="layui-btn"><i class="layui-icon">ဂ</i></button>
        <button class="layui-btn"><i class="layui-icon"></i></button>
        <button class="layui-btn"><i class="layui-icon"></i></button>
        <button class="layui-btn"><i class="layui-icon"></i></button>
        <button class="layui-btn"><i class="layui-icon"></i></button>
        <button class="layui-btn"><i class="layui-icon"></i></button>
      </p>
      <p>
        <button class="layui-btn layui-btn-small layui-btn-primary"><i class="layui-icon">ဂ</i></button>
        <button class="layui-btn layui-btn-small layui-btn-primary"><i class="layui-icon"></i></button>
        <button class="layui-btn layui-btn-small layui-btn-primary"><i class="layui-icon"></i></button>
        <button class="layui-btn layui-btn-small layui-btn-primary"><i class="layui-icon"></i></button>
        <button class="layui-btn layui-btn-small layui-btn-primary"><i class="layui-icon"></i></button>
        <button class="layui-btn layui-btn-small layui-btn-primary"><i class="layui-icon"></i></button>
        
        <button class="layui-btn layui-btn-small"><i class="layui-icon">ဂ</i></button>
        <button class="layui-btn layui-btn-small layui-btn-normal"><i class="layui-icon"></i></button>
        <button class="layui-btn layui-btn-small layui-btn-warm"><i class="layui-icon"></i></button>
        <button class="layui-btn layui-btn-small layui-btn-danger"><i class="layui-icon"></i></button>
        <button class="layui-btn layui-btn-small layui-btn-disabled"><i class="layui-icon"></i></button>
      </p>
      
      <pre class="layui-code layui-box layui-code-view" lay-title="结构"><h3 class="layui-code-h3">结构<a href="http://www.layui.com/doc/modules/code.html" target="_blank">layui.code</a></h3><ol class="layui-code-ol"><li>&lt;button class="layui-btn"&gt;</li><li>  &lt;i class="layui-icon"&gt;<i>&amp;</i>#xe608;&lt;/i&gt; 添加</li><li>&lt;/button&gt;</li><li> </li><li>&lt;button class="layui-btn layui-btn-small layui-btn-primary"&gt;</li><li>  &lt;i class="layui-icon"&gt;<i>&amp;</i>#x1002;&lt;/i&gt;</li><li>&lt;/button&gt;</li><li>      </li></ol></pre>
      <p class="layui-word-aux">温馨提示：各种图标字体请移步文档左侧【页面元素 - 图标】阅览</p>
    </div>
 
    
    <div class="site-title">
      <fieldset><legend><a name="other">结语</a></legend></fieldset>
    </div>
    <div class="site-text">
      <p>你是否发现，主题、尺寸、图标、圆角的交叉组合，可以形成难以计算的按钮种类。另外，你可能最关注的是配色，Layui内置的六种主题的按钮颜色都是业界常用的标准配色，如果他们仍然无法与你的网站契合，那么请先允许我“噗”一声。。。然后你就大胆地自撸一个颜色吧！比如：<i style="color: #E46AA3;">粉红色</i>或者<i style="color: #A67727;">菊花色</i>（一个有味道的颜色）</p>
    </div>
    
    <div class="layui-elem-quote">
  <p>Layui - 用心与你沟通</p>
</div>
    
  </div>
</div>
  
<div class="layui-footer footer footer-doc">
  <div class="layui-main">
    <p>2016 © <a href="/">layui.com</a> LGPL license</p>
    <p>
      <a href="http://fly.layui.com/jie/3147.html" target="_blank">捐赠作者</a>
      <!--<a href="javascript:layer.msg('暂无此页');">关于我们</a>-->
      <a href="mailto:xianxin@layui.com">广告联系</a>
      <a href="https://github.com/sentsin/layui/" target="_blank">Git仓库</a>
      <a href="http://weibo.com/SentsinXu" target="_blank" rel="nofollow">微博</a>
      <a href="http://fly.layui.com/jie/2461.html" target="_blank">微信公众号</a>
    </p>
  </div>
</div>
<script async="" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<div class="site-tree-mobile layui-hide">
  <i class="layui-icon"></i>
</div>
<div class="site-mobile-shade"></div>
<script src="//res.layui.com/layui/build/layui.js?t=1479413779832" charset="utf-8"></script>
<script>
layui.config({
  base: '//res.layui.com/lay/modules/layui/'
  ,version: '1479413779832'
}).use('global');
 
window.global = {
  preview: function(){
    var preview = document.getElementById('LAY_preview');
    return preview ? preview.innerHTML : '';
  }()
};
</script>


<ul class="layui-fixbar"><li class="layui-icon" lay-type="bar1" style=""></li><li class="layui-icon layui-fixbar-top" lay-type="top" style=""></li></ul><div class="layui-layer-move"></div></body></html>